<template>
  <div class="container">
    <el-card>
      <!-- 头部搜索框 -->
      <el-col :span="18">
        <el-form :inline="true" size="small" label-width="80px">
          <el-form-item label="学科名称">
            <el-input
              v-model.trim="reqParams.subjectName"
              placeholder="输入搜索关键字"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="onClear">清除</el-button>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-button
          type="success"
          icon="el-icon-edit"
          class="addSubject"
          @click="addSubjects"
          >添加学科</el-button
        >
      </el-col>

      <!-- 提示信息 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        class="alert alertTip"
        :closable="false"
        show-icon
      >
      </el-alert>

      <!-- 学科列表 -->
      <el-table :data="subjects" style="width: 100%">
        <el-table-column prop="date" label="序号" type="index">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期" width="180">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="前台是否显示">
          <template slot-scope="scope">
            {{ scope.row.isFrontDisplay === 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="230">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toDiretory(scope.row)"
              >学科分类</el-button
            >
            <el-button type="text" size="small" @click="toTag(scope.row)"
              >学科标签</el-button
            >
            <el-button type="text" size="small" @click="edit(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="delSubject(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="reqParams.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="reqParams.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 添加/修改对话框 -->
      <component
        v-bind:is="SubjectsAdd"
        ref="editSubjects"
        :text="text"
        :pageTitle="pageTitle"
        :formBase="formData"
        :ruleInline="ruleInline"
        v-on:newDataes="handleLoadDataList"
        v-on:handleCloseModal="handleCloseModal"
      >
      </component>
    </el-card>
  </div>
</template>

<script>
import {
  list as subjectsList,
  //   add as subjectsAdd,
  //   update as subjectsUpdate,
  remove as subjectsDel,
  detail
} from '@/api/hmmm/subjects'
import SubjectsAdd from './../components/subjects-add'

export default {
  name: 'subjects-page',
  components: {
    SubjectsAdd
  },
  data () {
    return {
      SubjectsAdd: 'subjectsAdd',
      // 筛选参数
      reqParams: {
        // 学科名字，关键字
        subjectName: null,
        page: 1,
        pagesize: 10
      },
      // 学科列表s
      subjects: [],
      // 总记录数
      total: 0,
      // 控制添加、修改对话框的显示与隐藏
      dialogVisible: false,
      isEdit: false,
      // 对话框表单参数
      formData: {
        subjectName: '',
        isFrontDisplay: null
      },
      // 添加表单的验证规则对象
      ruleInline: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      subjectsId: '',
      pageTitle: '学科', // 页面标题
      text: '' // 新增、编辑文本
    }
  },
  created () {
    this.getSubjects()
    // 键盘enter操作
    var that = this
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        that.onSearch(this.reqParams)
      }
    }
  },
  methods: {
    // 跳转去目录模块
    toDiretory (row) {
      // id name 是约定好的参数名称， 将来在目录按这种约定取值
      this.$router.push({
        path: 'directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 跳转去标签模块
    toTag (row) {
      // id name 是约定好的参数名称， 将来在目录按这种约定取值
      this.$router.push({
        path: 'tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 获取学科列表数据
    async getSubjects () {
      // api目录中的函数和 接口、数据相关，api接口时以对象方式传递
      const { data } = await subjectsList(this.reqParams)
      this.subjects = data.items
      this.total = data.counts
    },
    // 页面大小改变
    handleSizeChange (newSize) {
      this.reqParams.page = 1
      this.reqParams.pagesize = newSize
      this.getSubjects()
    },
    // 页码值改变
    handleCurrentChange (newPage) {
      this.reqParams.page = newPage
      this.getSubjects()
    },
    // 搜索框收索
    onSearch () {
      if (!this.reqParams.subjectName) return
      // 在此业务模块中，关键字是双向绑定的，如果页面有需要改动的参数 在搜索前改即可
      this.reqParams.page = 1
      this.getSubjects()
    },
    // 搜索框重置
    onClear () {
      this.reqParams.subjectName = null
      this.getSubjects()
    },
    // 删除学科
    delSubject (id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await subjectsDel({ id })
          this.$message.success('删除成功')
          this.getSubjects()
        })
    },
    // **********************************
    // 新增学科刷新列表
    handleLoadDataList () {
      this.getSubjects()
    },
    // 点击添加学科按钮
    addSubjects () {
      this.formData.subjectName = ''
      this.formData.isFrontDisplay = null
      this.text = '添加'
      this.$refs.editSubjects.dialogFormV()
    },
    // 点击修改按钮
    async edit (subjectsInfo) {
      // this.query()
    //   var _this = this
      this.text = '修改'

      this.formData.id = subjectsInfo.id
      const { data: res } = await await detail({ id: subjectsInfo.id })
      this.formData.subjectName = res.subjectName
      this.formData.isFrontDisplay = res.isFrontDisplay
      this.$refs.editSubjects.dialogFormV()
    },
    // 窗口操作**********************************
    // 弹框关闭
    handleCloseModal () {
      this.$refs.editSubjects.dialogFormH()
      // this.$refs.editSubjects.resetFields()
    }
  }
}
</script>

<style scoped lang='scss'>
.addSubject {
  float: right;
}

.alertTip {
  margin-bottom: 20px;
}

.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
